<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style lang="less" scoped>
@logo-height: 6em;
@logo-padding: 1.5em;
@transition-time: 300ms;
@vite-color: #646cffaa;
@vue-color: #42b883aa;

.logo {
  height: @logo-height;
  padding: @logo-padding;
  will-change: filter;
  transition: filter @transition-time;
  
  &:hover {
    filter: drop-shadow(0 0 2em @vite-color);
  }
  
  &.vue:hover {
    filter: drop-shadow(0 0 2em @vue-color);
  }
}
</style>
